8. מבנה העמוד של ה-CSS

עד כה בדקנו, פחות או יותר, את ההיבטים הטיפוגרפיים של CSSים. כעת הגיע הזמן ללמוד על מבנה העמוד של ה-CSS.
CSSים מציגים את היכולת להציב אלמנטים בכל מקום על הדף. אך ,למעשה, הדפדפנים הנוכחיים לא תומכים, ביעילות רבה, בפעולה זו
יש יותר מה ללמוד על מבנה הדף מאשר רק מיקום של אלמנטים. לגבי יותר מידע על מיקום ותרגול קצר, עברו על שיעור ההדרכה שלנו בנושא מיקום בעזרת CSS2..

חלל לבן (Whitespace)

פירסומים שעוצבו כראוי נראים מקצועיים ממספר סיבות. סיבה אחת היא השימוש בחלל לבן (או חלל ניטרלי). זה שובר את המידע על הדף עבור הקורא. שימוש טוב של חלל ניטרלי (שוליים, באופן טיפוסי, המרחב בין פיסקאות וכותרות, וכן השימוש בפתיחים) הופך את המידע לקריא יותר. הוא מושך את עין המשתמש למידע המשמעותי ביותר (כותרות), ולקטעים המקושרים בצורה הגיונית. "chunks".

בשיעור זה נפתח כללים המיישמים היבטים אלה של המבנה על הדף שלנו.

שוליים (Margins)

באופן טיפוסי, הטקסט בדף ממוסגר ע"י שוליים. עד עכשיו, בדפי האתר, השתמשנו או בטבלאות לייצור שוליים (רע מאוד), או שהתמודדנו עם שוליים של ברירת מחדל, המובנים בתוך הדפדפן.
CSSים מאפשרים לנו לקבוע שוליים על כל אלמנט. שוליים אלה הם החלל בין האלמנט וקצה האלמנט הגובל בו. עבור כותרות ופיסקאות ו"גוש אלמנטים" נוספים, בדרך-כלל יהיה זה הגוף, אך לא בהכרח. ניתן ליישם שוליים לכל קצה בנפרד, או לכל הקצוות בבת אחת. ניתן לציין את השוליים (שיכולים להיות או חיוביים או שליליים) במספר יחידות, אך אנו נישאר עם אחוזים, שבהם השתמשנו כבר עבור גודל הטקסט.

תרגיל מס' 1

קודם כל, הבה ניצור שוליים סביב כל הדף שלנו. בכדי לעשות זאת, נבחר את הגוף וניישם עליו מאפיין של שוליים.
עד כה אתם כבר צריכים להיות די טובים בזה, אז הנה כמה רמזים ותזכורות. תבנו את הכלל, ואז תבדקו שעשיתם נכון ע"י בדיקה בסוף השיעור.

• מאפיין השוליים (margin) נקרא שוליים (margin)

הבה נעשה אותו בכמות גדולה, 10%; תוך דקה אנחנו ניצור אפקט יפה, ונזדקק למעט שוליים כדי להשיג אפקט זה. תבחנו את העבודה הזריזה שלכם. שימרו את ה-CSS ואז פיתחו את הדף בדפדפן.

פתיחים ו- Outdenting לכותרות

כותרות

זהו אפקט טיפוגרפי נפוץ למשוך תשומת לב לכותרות ע"י שימוש ב- Outdenting, כך שהם תלויים מחוץ לגוף העיקרי של הטקסט. זה מה שנעשה עכשיו.

יש מספר דרכים לעשות זאת. דרך אחת, היא ליצור שוליים שמאליים שליליים (שוליים-שמאל) (margin-left) עבור כותרות. ייתכן ו- Outdenting פחות תלויים ברמת הכותרת. אתם יכולים גם להשתמש במאפיין טקסט-פתיח text-indent בעל ערך שלילי כדי לערוך Outdenting לכותרות.

תרגיל מס' 2

השימוש באחת מן הטכניקות שתיארתי למעלה, יוצר כללים למספר רמות של כותרות, הנותנים Outdenting לכותרות בדף. תזדקקו לבורר פשוט בכדי לבחור כותרות מרמה 1, רמה 2 וכו'. אז יש לבחור מאפיין כדי ליצור את הפתיח, בעזרת שוליים-שמאל שלילי margin-left, או טקסט-פתיחtext-indent. כדי ליצור ערך שלילי כל שעליכם לעשות הוא להציב סימן מינוס (-) לפני הערך (בכדי ליצור ערך שלילי כל שעליכם לעשות הוא להציב סימן מינוס (-) לפני הערך (בלי רווח). לדוגמא, -10%.

התשובות בתחתית, כרגיל.

טקסט

בפרסום שעוצב כראוי, השורה הראשונה של הפיסקה יכולה להיות פתיח, כשהשורות שבאות אחריו בפיסקה מסודרות בשורה עם השוליים. זה מדגיש את ההתחלה של "גוש" (chunk) מידע הגיוני.
ההבדל בין שתי הגישות שזה עתה ראינו (שוליים מול טקסט-פתיח) (margin מול text-indent) , הוא שכשמיישמים שוליים לאלמנט, התוצאה היא יישום של פתיח על כל האלמנט הזה; ויישום של מאפיין טקסט-פתיח text-indent נותן פתיח לשורה הראשונה בלבד.

תרגיל מס' 3

בכדי לחזק את התרגול האחרון, הבה ננסה שכל אחת מן הפיסקאות תתחיל בשורת פתיח. הפעם נשתמש בערך חיובי במקום ערך שלילי עבור טקסט-פתיח. עד כאן, זה צריך להיות כבר יותר קל עבורכם.

אנו זקוקים לכלל הבוחר פיסקאות (אלמנט P) ואז ניישם פתיח לטקסט של 10% 20%, או יותר.

התשובות בתחתית, כרגיל.

שלב הבא

יש עוד הרבה מאפיינים למבנה דף ב-CSSים שעליהם תוכלו ללמוד, מתוך אחד משיעורי ההדרכה המקיפים יותר, המוזכרים בחלק של מקורות. בשיעור זה עסקנו ביסודות הראשוניים של עבודה עם חלל נייטרלי בדפי האתר.

בשלב הבא, נבדוק היבט רב עוצמה ,אך מעט מסובך, של CSSים המאפשר לכם ליצור אלמנטים שלHTML משלכם (או משהו שיש לו אפקט דומה)

דוגמת תשובה לתרגיל 1

  BODY {margin: 10%}

דוגמת תשובה לתרגיל 2

H1 {text-indent: -10%}
H2 {text-indent: -6%}
H3 {text-indent: -4%}
H4 {text-indent: -2%}

דוגמת תשובה לתרגיל 3

P {text-indent: 5%}